import React, {Component, PropTypes} from 'react'
import { connect } from 'react-redux'

import { ContentHeader } from '../../wrapper';
import { actions } from '../action/action'
import { profileItems } from '../static/index'
import FormGroup from '../../common/form'

class Content extends Component {
    submit() {
        const { userName, nickName, email, errors, submitProfile } = this.props;
        
        submitProfile({
            userName: userName,
            nickName: nickName,
            email: email
        })
    }
    render() {
        const props = this.props;
        const { errors, validate } = props;
        return <div className="content" style={{paddingBottom: 0}}>
            <section className="content-header">
                <h1>个人信息</h1>
            </section>
            <div style={{minHeight: 500, padding: '45px 0 10px'}}>
                
                <form className="box-body form-horizontal">
                    {profileItems.map((i) => <FormGroup 
                        key={i.id}
                        options={i}
                        data={props[i.id]}
                        error={errors.filter((j) => j.target == i.id)}
                        callback={(e) => props[i.callback](e)}
                        onKeyUp={() => validate({
                            [i.id]: props[i.id]
                        })}
                        onBlur={() => validate({
                            [i.id]: props[i.id]
                        })}
                    />)}
                </form>
            </div>
            <div className="box-footer profile-footer">
                <button className="btn btn-primary pull-right" onClick={() => this.submit()}>保存信息</button>
            </div>
        </div>
    }
}


const _Content = connect(
    (state) => {
        return {
            userName: state.userName,
            nickName: state.nickName,
            email: state.email,
            errors: state.errors
        }
    },
    (dispatch) => {
        return {
            changeAvatar: (e) => actions.changeAvatar(dispatch, e),
            changeUserName: (e) => actions.changeUserName(dispatch, e),
            changeNickName: (e) => actions.changeNickName(dispatch, e),
            changeEmail: (e) => actions.changeEmail(dispatch, e),
            submitProfile: (data) => actions.submitProfile(dispatch, data),
            validate: (data) => actions.validate(data, dispatch)
        }
    }
)(Content);

export default _Content